<style lang="less" scoped>
	@import "./variables.less";

	#root {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.operationBar {
		position: absolute;
		top: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 90px;
		color: #FFF;

		.logo {
			width: 340px;
			background: url("./assets/logo.png") center;
			flex-shrink: 0;
		}

		.menu {
			width: 100%;
			height: 90px;
			display: flex;
			flex-direction: column;
		}

		.topLevel {
			font-size: 16px;
			background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .6));
			white-space: nowrap;
			width: 100%;
			display: flex;
			flex-direction: row;

			nav {
				cursor: pointer;
				display: inline-block;
				width: 100px;
				text-align: center;

				&.active {
					color: #29ac13;
				}
			}

			.additional {
				padding-right: 12px;
				white-space: nowrap;
				display: inline-block;
				vertical-align: bottom;
				text-overflow: ellipsis;
				text-align: right;
				flex-grow: 1;

				span {
					padding: 0 8px;
				}
			}
		}

		.secondLevel {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			width: 100%;
			height: 100%;
			overflow-y: visible;
			border-top: 2px solid rgba(0, 0, 0, 0.2);

			.active ~ .functions::after, .active.functions::after {
				content: none;
			}

			.functions {
				height: 100%;
				width: 80px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
				padding: 0 12px;
				overflow: visible;

				&.inUse::after {
					content: "";
					width: 100%;
					height: 1px;
					position: absolute;
					top: -2px;
					left: 0;
					border-top: 2px solid #29ac13;
				}

				&.inUse:first-child::after {
					width: 66px;
					left: 14px;
				}

				&.active {
					color: #29ac13;
					background: rgba(0, 0, 0, .3);

					&::before {
						content: "";
						position: absolute;
						width: 1px;
						height: 17px;
						top: -2px;
						border-left: 2px solid #29ac13;
						left: 50%;
					}
				}
			}
		}
	}

	.sensor {
		display: inline-flex;
		width: 48%;
		margin: 12px 1%;
		height: 60px;
		font-size: 12px;
		border-radius: 6px;
		background-color: rgba(12, 34, 46, .8);
		justify-content: space-around;
		align-items: center;
		padding: 6px;
		vertical-align: bottom;

		.sensorStatus {
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		&Dot {
			width: 20px;
			height: 20px;
			border-radius: 10px;
		}

		.status {
			&-1 {
				background-color: #e11523;
				filter: drop-shadow(0 0 6px #e11523);
			}

			&-2 {
				background-color: #de8b5b;
				filter: drop-shadow(0 0 6px #de8b5b);
			}

			&-3 {
				background-color: #dec963;
				filter: drop-shadow(0 0 6px #dec963);
			}

			&-4 {
				background-color: #969899;
				filter: drop-shadow(0 0 6px #969899);
			}

			&-5 {
				background-color: #00fa9a;
				filter: drop-shadow(0 0 6px #00fa9a);
			}
		}

		.inside {
			background: radial-gradient(circle, #e11523, #00fa9a);
			width: 80px;
			height: 3px;
		}

		.inside {
			background: radial-gradient(circle, #00fa9a, #e11523);
			width: 80px;
			height: 3px;
		}

		.linear {
			background: linear-gradient(90deg, #00fa9a, #e11523);
			width: 80px;
			height: 3px;
		}

		.revLinear {
			background: linear-gradient(90deg, #e11523, #00fa9a);
			width: 80px;
			height: 3px;
		}

	}

	.sharp {
		position: absolute;
		margin-left: -9px;
	}

	.sensorName {
		overflow: hidden;
		max-height: 100%;
	}

	.sensorFiles {
		max-height: 340px;
		overflow: auto;

		.sensorFile {
			padding: 4px;
			background-color: rgba(12, 34, 46, .8);
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			color: #FFF;
			display: block;
			border-bottom: 1px solid hsla(201, 59%, 30%, 0.8);
		}
	}

	.deviceBaseInfo {
		font-size: 14px;
		line-height: 32px;
		background-color: @lightTitleBackground;
		padding: @smallSpace;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		i {
			width: 30px;
			height: 30px;
			display: inline-block;
			text-align: center;
			margin-right: @middleSpace;
		}

		&:not(:last-child):after {
			content: "";
			display: block;
			left: 40px;
			position: absolute;
			right: 0;
			height: 1px;
			border-bottom: 1px solid #536370;
		}
		& > span:last-child{
			font-size: 12px;
			text-align: right;
		}
	}

	.deviceConnect {
		display: flex;
		flex-direction: row;
		background-color: @lightTitleBackground;
		align-items: center;
		padding: 0 4px;

		.deviceStream {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			line-height: 30px;
			height: fit-content;

			&:first-child {
				flex-grow: 1;

				&:after {
					content: "";
					display: block;
					position: absolute;
					top: 16px;
					bottom: 16px;
					width: 1px;
					border-left: 1px solid #FFF;
					right: 0;
				}

				span {
					display: block;
					width: 70%;
					text-align: right;

					&:after {
						content: "";
						display: block;
						position: absolute;
						top: 16px;
						width: 24px;
						height: 1px;
						border-bottom: 1px solid #FFF;
						right: -27px;
					}
				}
			}

			&:last-child {
				flex-grow: 1;

				&:after {
					content: "";
					display: block;
					position: absolute;
					top: 16px;
					bottom: 16px;
					width: 1px;
					border-left: 1px solid #FFF;
					left: 0;
				}

				span {
					display: block;
					width: 70%;

					&:after {
						content: "";
						display: block;
						position: absolute;
						top: 16px;
						width: 24px;
						height: 1px;
						border-bottom: 1px solid #FFF;
						left: -27px;
					}
				}
			}
		}
	}

	.repairList {
		border: 1px solid rgba(255, 255, 255, 0.6);
		margin: 12px @middleSpace;

		.repairItem {
			padding: @smallSpace;

			.icon {
				width: 40px;
				display: inline-block;
				text-align: center;
				line-height: 40px;
				vertical-align: text-bottom;
				font-size: 22px;
			}

			.detail {
				display: inline-block;

				.number {
					color: dodgerblue;
				}

				.describe {
					font-size: @fontSizeD;
				}

				.date {
					color: #DDD;
				}
			}

			&:not(:last-child):after {
				content: "";
				display: block;
				width: 390px;
				position: absolute;
				border-bottom: 1px solid #888;
				bottom: 0;
				right: 0;
			}

			.status {
				float: right;
				text-align: center;
				border-radius: 50px;
				color: white;
				line-height: 26px;
				width: 80px;
				margin-top: 8px;

				&.status-1 {
					background-color: rgba(247, 53, 53, .7);

					&:after {
						content: "新建";
					}
				}

				&.status-2 {
					background-color: rgba(50, 162, 220, .7);

					&:after {
						content: "处理中";
					}
				}

				&.status-3 {
					background-color: rgba(69, 185, 104, .7);

					&:after {
						content: "已解决";
					}
				}

				&.status-4 {
					background-color: rgba(170, 170, 170, .7);

					&:after {
						content: "已完成";
					}
				}
			}
		}
	}
	.footerList{
		position: absolute;
		bottom:20px;
		left:190px;
	}
	.restView{
		position: static;
		float: left;
	}
	.roomMessage{
		display: flex;
	}
	.list-icon{
		display: flex;
		width: 40px;
		align-items: center;
		img{
			height: 17px;
			display: block;
			zoom:normal;
			margin:  0 auto;
		}
	}
	.roomcontent{
		display: flex;
		flex-grow: 1;
		border-bottom: 1px solid rgba(255,255,255,.5);
		padding: 10px;
		justify-content: space-between;
	}
	/deep/.roomTabs{
		.ivu-tabs-bar{
			margin-bottom: 0;
		}
		.ivu-tabs-ink-bar{
			visibility: hidden !important;
		}
		.ivu-tabs-nav{
			width: 100%;
			.ivu-tabs-tab{
				padding:9px 0;
				margin: 0;
				width: 20%;
				div{
					span{
						margin: 0 auto !important;
					}
					img{
						margin: 0 auto !important;
					}
				}

			}
		}
	}
	.tabsContent{
		height: 300px;
		margin:0 15px 15px 15px;
		border-radius: 0 0 5px 5px;
		border: 1px solid rgba(50,162,220,.5);
		border-top: none;
		padding-bottom: 10px;
		overflow: auto;
	}
	.Btns{
		background: green;
		text-align: center;
		border-radius:10px;
		width: 60px;
		padding: 2px 10px;
		font-size: 12px;
	}
	.searchModel{
		padding:10px;
		box-sizing: border-box;
		width: 170px;
		position: absolute;
		bottom: 70px;
		font-family: '微软雅黑';
		background: rgba(16, 30, 43, 0.8);
		border:1px solid   rgba(16, 30, 43, 1);
		border-radius: 5px;
		.searchBody{
			height: 100px;
			overflow: auto;
			font-size: 14px;
			&>div>div{
				overflow: hidden;
				width: 100%;
				padding:0 3px;
				text-align: left;
				text-overflow: ellipsis;
				font-family: '微软雅黑' !important;
				white-space: nowrap;
				line-height: 25px;
				font-size: 13px;
			}
		}
	}
	.myinput{
		width: 100%;
		height: 40px;
		border-radius: 5px;
		line-height: 40px;
		font-size: 14px;
		background: rgba(50,162,220,.2);
		outline: none;
		padding-left: 25px;
		border: none;
	}
	.myinput::-webkit-input-placeholder{
		color:white;
	}
	.List-active{
		background:rgba(50,162,220,.2);
	}
</style>
<template>
	<div id="root">
		<div style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: gray"
			v-if="noModule"></div>
		<iframe id="frame" src="/static/UnityWeb/Unity/SpaceAndDevice/"
			style="position: absolute;top: 0;left: 0;width: 100%;height: 100%" v-else></iframe>
		<div class="operationBar">
			<div class="logo"></div>
			<div class="menu">
				<div class="topLevel">
					<nav :class='{active:menuActive===index}' :key=index @click='handleMenuClick(i,index)'
						v-for='(i, index) in topLevel'>
						<i class='iconfont' v-html='i.icon||"&#xe8cb;"' />
						{{i.name}}
					</nav>
					<div class="additional">
						<span>系统主题色：<ColorPicker @on-change="ChangeBaseColor" editable format="rgb" recommend
							size=small style="display: inline-block" v-model="baseColor" /></span>
						<span>{{time}}</span>
						<span><i class="iconfont">&#xe602; </i>{{unread}} 个通知</span>
					</div>
				</div>
				<div class="secondLevel">
					<div :class="{active:secondActive===i.name,inUse:inUse.indexOf(i.href)>-1}" :key="i.name"
						@click="handleSecondClick(i)"
						class="functions" v-for="i in secondLevel">
						<i class="iconfont" style="display: block;font-size: 24px" v-html="i.icon" />
						<div style="color: white">{{i.name}}</div>
					</div>
				</div>
			</div>
		</div>
		<div :style="{left: visibility}" class="main">
			<div class="footerList">
					<div @click="operation('ResetView')"
					class="iconfont restView" style="left:168px" title="重置视角">&#xe65e;
					</div>
					<!-- <div @click="operation('ReShader')"
						class="restView" style="left:236px;padding-top: 6px" title="刨切"><img alt="" src="./assets/sliced.png">
					</div> -->
					<div @click="poQie"
						class="iconfont restView" style="left: 90px;display: flex;justify-content: center;align-items: center;" title="剖切">
						<img src="./assets/po.png">
					</div>
					<div @click="manYou"
						class="iconfont restView" style="left: 165px;display: flex;justify-content: center;align-items: center;" title="漫游">
						<img src="./assets/man.png">
					</div>
					<div @click="ceLiang"
						class="iconfont restView" style="left: 230px;display: flex;justify-content: center;align-items: center;" title="测量">
						<img src="./assets/ce.png">
					</div>
				<div @click="xuhua"
					 class="iconfont restView" style="left: 230px;display: flex;justify-content: center;align-items: center;" title="虚化">
					<img src="./assets/xuhua.png">
				</div>
				<div
					 class="iconfont restView" style="left: 230px;display: flex;justify-content: center;align-items: center;" v-show="$route.fullPath !== '/device/elevator/' ">
					<img src="./assets/search.png"  @click="changeshow()"  title="搜索" >
					<div class="searchModel"v-show="showSearch ==  1">
						<div class="searchBody">
							<div style="display: flex;align-items: center;justify-content: center;height: 100%;" v-show="showloading">加载中...</div>
							<div v-show="!showloading">
								<div  v-for="(item,index) in searchroom" :class="{'List-active':index == myindex1}"  @click="changeRoom(item,index)">{{item.number +'-'+item.name}}</div>
							</div>
						</div>
						<div style="position: relative;">
							<input class="myinput" placeholder="请输入房间" v-model="myroom"/>
							<img src="./assets/search.png" style="width:14px;position: absolute;left:6px;top:30px;">
						</div>
					</div>
					<div class="searchModel"v-show="showSearch == 2">
						<div class="searchBody">
							<div style="display: flex;align-items: center;justify-content: center;height:100%" v-show="showloading">加载中...</div>
							<div v-show="!showloading">
								<div   v-for="(item,index) in searchdevice" :class="{'List-active':index == myindex2}" @click="toFloordevice(item,index)">{{item.device_category_name + '-' + item.code}}</div>
							</div>
						</div>
						<div style="position: relative;">
							<input class="myinput" placeholder="请输入设备" v-model="mydevice"/>
							<img src="./assets/search.png" style="width:14px;position: absolute;left:6px;top:30px;">
						</div>
					</div>
				</div>

			</div>
			<RouterView />
		</div>
		<drag :height=400 :left=60 :top=100 :width=350 @close="showAttach = false" showClose title="房间信息"
			v-if="showAttach"  class="roomDetails">
			<Tabs  class="roomTabs">
				<TabPane :label="renderLabel.bind(this,'info')">
					<div class="tabsContent">
						<div class="roomMessage" v-for="item in attachInfo">
							<div class="list-icon">
								<img :src="item.img" alt="">
							</div>
							<div class="roomcontent">
								<div>{{item.name}}</div>
								<div>{{item.value}}</div>
							</div>
						</div>
					</div>
				</TabPane>
				<TabPane :label="renderLabel.bind(this,'repair')">
					<div class="tabsContent" style="display: flex;align-items: center;justify-content: center" v-show="roomMessage.repairlist.length == 0">
						暂无数据
					</div>
					<div class="tabsContent" v-show="roomMessage.repairlist.length > 0">
						<div class="roomMessage" v-for="item in roomMessage.repairlist">
							<div class="list-icon">
								<img src="./assets/room/icon_fangjianming.png" alt="">
							</div>
							<div class="roomcontent" @click="toRepair(item)">
								<div>
									<div>{{item.describe}}</div>
									<div>{{item.createtime ? item.createtime.replace('T',' ') : '' }}</div>
								</div>
								<div  style="display: flex;align-items: center">
									<div class="Btns" style="background:rgba(170,170,170 ,0.7);border:1px solid rgba(170,170,170,0.8)" v-show="item.status == 4">已关闭</div>
									<div class="Btns" style="background:rgba(69,185,104,0.7);border:1px solid rgba(69,185,104,0.8)" v-show="item.status == 3">已解决</div>
									<div class="Btns" style="background:rgba(50,162,220,0.7);border:1px solid rgba(50,162,220,0.8)" v-show="item.status == 2">处理中</div>
									<div class="Btns" style="background:rgba(247,53,53,0.7);border:1px solid rgba(247,53,53,0.8)" v-show="item.status == 1">新建</div>
								</div>
							</div>
						</div>
					</div>
				</TabPane>
				<TabPane  :label="renderLabel.bind(this,'device')">
					<div class="tabsContent" style="display: flex;align-items: center;justify-content: center" v-show="roomMessage.devicelist.length == 0">
						暂无数据
					</div>
					<div class="tabsContent" v-show="roomMessage.devicelist.length > 0">
						<div class="roomMessage" v-for="item in roomMessage.devicelist">
							<div class="list-icon">
								<img src="./assets/room/device.png" alt="">
							</div>
							<div class="roomcontent">
								<div>
									{{item.device_category_name}}-{{ item.code}}
								</div>
								<div  style="display: flex;align-items: center">
									{{item.device_category_name}}
								</div>
							</div>
						</div>
					</div>
				</TabPane>
				<TabPane  :label="renderLabel.bind(this,'file')" >
					<div class="tabsContent" style="display: flex;align-items: center;justify-content: center" v-show="roomMessage.filelist.length == 0">
						暂无数据
					</div>
					<div class="tabsContent" v-show="roomMessage.filelist.length > 0">
						<div class="roomMessage" v-for="item in roomMessage.filelist">
							<div class="list-icon">
								<img src="./assets/room/device.png" alt="">
							</div>
							<div class="roomcontent">
								<div>
									<a target="_blank" :href="'http://saasfile.bimsheng.com/onlineview?file=http://dfyy.bimsheng.com'+item.document.fileurl">{{ item.document.filecode}}</a>
								</div>
								<div  style="display: flex;align-items: center">
								</div>
							</div>
						</div>
					</div>
				</TabPane>
				<TabPane :label="renderLabel.bind(this,'video')">
					<div class="tabsContent" style="display: flex;align-items: center;justify-content: center">
						<img src="./assets/room/shipin.png" >
					</div>
				</TabPane>

			</Tabs>
		</drag>
		<drag :height=200 :left=60 :top=100 :width=350 @close="showDevice = false" class="roomDetails" showClose title="设备信息"
			v-if="showDevice">
			<Tabs>
				<TabPane :label="renderLabel.bind(this,'info')">
					<ul style="margin:10px 10px 16px 10px;border-radius: 5px;border:1px solid #536370;overflow: hidden">
						<li :key="i.value" class="deviceBaseInfo" v-for="i in deviceInfo.base">
							<span
								style="width: 120px;text-align: left;display: inline-block;margin-right: 6px;float: left"><i
								class="iconfont" v-html="i.icon" />{{i.name}}</span>
							<span style="display: block;margin-left: 120px">{{i.value}}</span>
						</li>
					</ul>
				</TabPane>
				<TabPane :label="renderLabel.bind(this,'repair')"
					v-if="deviceInfo.repair.length>0">
					<div class="repairList">
						<div :key="i.id" class="repairItem" v-for="i in deviceInfo.repair" @click="toRepair(i)">
							<div class="icon iconfont">&#xe886;</div>
							<div class="detail">
								<div class="detail">{{i.describe}}</div>
								<div class="date">{{i.createtime.replace("T","")}}</div>
							</div>
							<div :class="'status-'+i.status" class="status"></div>
						</div>
					</div>
				</TabPane>
				<TabPane :label="renderLabel.bind(this,'source')">
					<div class="deviceConnect">
						<div class="deviceStream">
							<template v-if="deviceInfo.upstream.length>0" >
								<span style="cursor:pointer" :key=index v-for='(i,index) in deviceInfo.upstream' @click="toDevice(i)">{{i.name}}</span>
							</template>
							<span v-else>没有上游设备</span>
						</div>
						<div class="deviceStream">
							→当前设备→
						</div>
						<div class="deviceStream">
							<template v-if="deviceInfo.downstream.length>0">
								<span style="cursor: pointer" :key=index v-for='(i,index) in deviceInfo.downstream' @click="toDevice(i)">{{i.name}}</span>
							</template>
							<span v-else>没有下游设备</span>
						</div>
					</div>
				</TabPane>
				<TabPane :label="renderLabel.bind(this,'monitor')" style="max-height: 340px;overflow: auto"
					v-if="deviceInfo.sensor.length>0">
					<div :key="i.id" class="sensor" v-for="i in deviceInfo.sensor">
						<div class="sensorName">{{i.name}}</div>
						<div class="sensorStatus">
							<p :title="i.value"
								style="width: 80px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: center">{{i.value}}</p>
							<div :class="i.status" class="sensorDot" v-if="i.range===0||i.status===4"></div>
							<div v-else>
								<div :style="{left: i.offset+'%'}" class="sharp">▲</div>
								<div :class="i.class"></div>
							</div>
						</div>
					</div>
				</TabPane>
				<TabPane :label="renderLabel.bind(this,'file')" v-if="deviceInfo.file.length>0">
					<div class="sensorFiles">
						<a :href="'http://saasfile.bimsheng.com/onlineview?file=http://dfyy.bimsheng.com'+i.url" :key="i.id" target="_blank" class="sensorFile"
							v-for="i in deviceInfo.file">{{i.name}}</a>
					</div>
				</TabPane>
				<TabPane label="精细模型" v-if="deviceInfo.moduleSrc">
					<iframe src="//about:blank" />
				</TabPane>
			</Tabs>
		</drag>
	</div>
</template>

<script lang="ts">
	import { Button, ColorPicker, TabPane, Tabs,Spin} from "view-design";
	import { Component, Vue, Watch } from "vue-property-decorator";
	import moment from "moment";
	import request from "@/request";
	import drag from "@/components/drag/drag.vue";
	import axios, { AxiosPromise } from "axios";
	import less from "less";
	import { CreateElement, VNode } from "vue";

	const imgMap = {
		info: require("./assets/E.png"),
		repair: require("./assets/C.png"),
		source: require("./assets/B.png"),
		monitor: require("./assets/A.png"),
		file: require("./assets/D.png"),
		device:require("./assets/room/device.png"),
		video:require("./assets/room/video.png"),
		roombianhao: require("./assets/room/icon_fangjianhao.png"),
		roomtype: require("./assets/room/icon_fangjianleixing.png"),
		roomName: require("./assets/room/icon_fangjianming.png"),
		jzmj: require("./assets/room/icon_jianzhumianji.png"),
		bm: require("./assets/room/icon_shiyongbumen.png"),
		sybm: require("./assets/room/icon_shiyongbumen.png"),
		symj: require("./assets/room/icon_shiyongmianji.png"),
	};
	const CancelToken = axios.CancelToken;
	const noModule = false;

	interface menu {
		name:string,
		icon?:string,
		children?:subMenu[]
	}

	interface subMenu {
		name:string,
		icon:string,
		href:string
	}

	interface deviceInfoTable {
		name:string,
		value:any,
		range?:any,
		icon?:string
	}

	@Component({
		components: {
			Button,
			drag,
			Tabs,
			TabPane,
			ColorPicker,
			Spin
		}
	})
	export default class App extends Vue {
		public time:string = "";
		public unread:number = 0;
		public myindex1:number = -1;
		public myindex2:number = -1;
		public myroom:string = "";
		public mydevice:string = "";
		public closePoStatus:boolean = false;
		public closeManStatus:boolean = false;
		public closeCeStatus:boolean = false;
		public closexhStatus:boolean = false;
		public showSearch:number = -1;
		public showloading:boolean = false;
		public searchroom: any [] = [];
		public searchdevice: any [] = [];
		public isRoominfo:boolean = true;
		public menuActive:number = 0;
		public topLevel:menu[] = [];
		public secondActive:string = "";
		public secondLevel:subMenu[] = [];
		public attachInfo:{ name:string, value:any }[] = [];
		public roomMessage:any = {
			repairlist:[],
			video:"",
			filelist:[],
			devicelist:[]

		};
		public showAttach:boolean = false;
		public visibility:0 | string = "9999px";
		public src:string = "";
		public showDevice:boolean = false;
		public deviceInfo:{ [ base:string ]:any[] | string, moduleSrc:string, repair:any[] } = {
			base: [],
			sensor: [],
			file: [],
			moduleSrc: "",
			downstream: [],
			upstream: [],
			repair: []
		};
		inUse:string[] = [];
		public readonly noModule:boolean = process.env.NODE_ENV === "production" ? false : noModule;
		baseColor:string = this.$store.state.baseColor;
		private cancelToken?:any;
		private locks:(() => void)[] = [];
		private link:HTMLLinkElement = document.createElement("link");
		private MainLink:HTMLLinkElement = document.createElement("link");
		private workLine:Promise<any>[] = [];
		private firstLoad?:Promise<any>;
		private status = {
			ReShader: false
		};

		public handleMenuClick (i:menu, index:number) {
			this.menuActive = index;
			if (i.children && i.children.length > 0) {
				this.inUse = i.children.map(t => t.href);
				this.secondLevel = i.children;
			} else {
				this.inUse = [];
			}
		}

		operation (operation:string) {
			let payload:undefined | boolean;
			if (operation !== "ResetView") {
				// @ts-ignore
				payload = this.status[ operation ] = !this.status[ operation ];
			}
			this.firstLoad!.then(() => {
				// @ts-ignore
				document.getElementById("frame").contentWindow.gameInstance.SendMessage("Canvas", operation,payload ? payload.toString() : '');
			});
		}

		public handleSecondClick (i:{ icon:string, name:string, href?:string }) {
			if (i.href === void 0 || i.href === "") {
				return;
			}
			this.secondActive = i.name;
			if (i.href) {
				if (this.inUse.indexOf(i.href) === -1) {
					let index = -1;
					const top = this.topLevel.find((t, j) => {
						if (t.children) {
							let temp = t.children.findIndex(d => d.href === i.href);
							if (temp > -1) {
								index = j;
								return true;
							} else {
								return false;
							}
						} else {
							return false;
						}
					});
					if (top) {
						this.handleMenuClick(top, this.topLevel.findIndex(t => t === top));
					}
				}
			}
			if (i.href) {
				this.$router.push(i.href);
			}
		}

		public getMessage ():void {
			request("/user/message/?user=&status=1&mtype!=1&pagesize=1").then(({ data }) => {
				this.unread = data.count;
				setTimeout(() => {
					this.getMessage();
				}, 15000);
			});
		}
		changeRoom(item:any,index:number){
			this.myindex1 = index;
			if(!item.room_guid){
				this.$Message.error('当前房间没有模型录入');
				return;
			}
			console.log(item);
			// @ts-ignore
			this.$store.commit("findRoom", {
				floor: item.floorid,
				id: item.room_guid,
				path: [ item.floorfacilityid, item.floorid, item.id ]
			});
		}
		toFloordevice(item:any,index:number){
			console.log(item)
			this.myindex2 = index;
			this.$store.commit('changeViewByCode',{id:item.dbid.floor_id,type:'device'});
			// @ts-ignore
			document.getElementById("frame").contentWindow.gameInstance.SendMessage("Canvas", 'CameraMove',`${item.dbid.floor_id}/${item.guid}`);
		}
		restModule (url:string) {
			this.locks.forEach(t => t());
			this.locks = [];
			this.visibility = "9999px";
			// @ts-ignore
			this.firstLoad.then(() => {
				// @ts-ignore
				document.getElementById("frame").contentWindow.gameInstance.SendMessage("Canvas", "ChangeScenesMassage", String(url));
			});
			this.status = {
				ReShader: false
			};
			this.firstLoad = new Promise(resolve => {
				window.end = () => {
					this.visibility = 0;
					resolve();
				};
			});
		}

		poQie () {
			this.firstLoad!.then(() => {
				// @ts-ignore

				if (!this.closePoStatus) {
					// @ts-ignore
					document.getElementById("frame").contentWindow.gameInstance.SendMessage("Canvas", "ReShader", "true");
					this.closePoStatus = true;
					this.$Message.success("打开剖切!");
				} else {
					// @ts-ignore
					document.getElementById("frame").contentWindow.gameInstance.SendMessage("Canvas", "ReShader", "false");
					this.closePoStatus = false;
					this.$Message.success("关闭剖切!");
				}
			});
		}

		manYou () {
			this.firstLoad!.then(() => {
				// @ts-ignore

				if (!this.closeManStatus) {
					// @ts-ignore
					document.getElementById("frame").contentWindow.gameInstance.SendMessage("Canvas", "Roma", "true");
					this.closeManStatus = true;
					this.$Message.success("开始漫游!");
				} else {
					// @ts-ignore
					document.getElementById("frame").contentWindow.gameInstance.SendMessage("Canvas", "Roma", "false");
					this.closeManStatus = false;
					this.$Message.success("结束漫游!");
				}
			});
		}

		xuhua(){
			this.firstLoad!.then(() => {
				// @ts-ignore
				if (!this.closexhStatus) {
					// @ts-ignore
					document.getElementById("frame").contentWindow.gameInstance.SendMessage("Canvas", "ViewSingle", "true/''");
					this.closexhStatus = true;
					this.$Message.success("开启虚化!");
				} else {
					// @ts-ignore
					document.getElementById("frame").contentWindow.gameInstance.SendMessage("Canvas", "ViewSingle", "false/''");
					this.closexhStatus = false;
					this.$Message.success("关闭虚化!");
				}
			});
		}

		ceLiang () {
			this.firstLoad!.then(() => {
				// @ts-ignore

				if (!this.closeCeStatus) {
					// @ts-ignore
					document.getElementById("frame").contentWindow.gameInstance.SendMessage("Canvas", "MeasuringTool", "true");
					this.closeCeStatus = true;
					this.$Message.success("打开测量!");
				} else {
					// @ts-ignore
					document.getElementById("frame").contentWindow.gameInstance.SendMessage("Canvas", "MeasuringTool", "false");
					this.closeCeStatus = false;
					this.$Message.success("关闭测量!");
				}
			});
		}

		ChangeBaseColor (color:string) {
			this.$store.commit("changeBaseColor", color);
		}

		renderCss () {
			less.render(lessFiles.global, {
				javascriptEnabled: true,
				modifyVars: {
					"@baseColor": this.$store.state.baseColor,
					"path": "/static/UnityWeb/desktop/"
				},
				paths: [ "/static/UnityWeb/desktop/" ]
			}).then(data => {
				this.MainLink && this.MainLink.remove();
				const href:string = URL.createObjectURL(new Blob([ data.css ]));
				const link = document.createElement("link");
				link.href = href;
				link.rel = "stylesheet";
				document.head.appendChild(link);
				this.MainLink = link;
			});
			less.render(lessFiles.Home, {
				javascriptEnabled: true,
				modifyVars: {
					"@baseColor": this.$store.state.baseColor,
					"path": "/static/UnityWeb/desktop/"
				},
				paths: [ "/static/UnityWeb/desktop/" ]
			}).then(data => {
				this.link && this.link.remove();
				const href:string = URL.createObjectURL(new Blob([ data.css ]));
				const link = document.createElement("link");
				link.href = href;
				link.rel = "stylesheet";
				document.head.appendChild(link);
				this.link = link;
			});
		}
		changeshow(){
			if(this.showSearch == -1){
				this.showSearch = this.isRoominfo ? 1 : 2;
			}else{
				this.showSearch = -1;
			}
		}

		toDevice(item: any){
			console.log(item)
			if(item.guid){
				// @ts-ignore
				document.getElementById("frame").contentWindow.gameInstance.SendMessage("Canvas", 'CameraMove',`${item.guid}`);
			}
		}
		toRepair(item: any){
			//房间信息弹窗和设备信息弹窗的维修单跳转
			if(item.isactor && item.status !== 4){
				this.$router.push({
					path:`/repair/operation/${item.id}/`,
				})
			}else{
				this.$router.push({
					path:`/repair/detail/${item.id}/`,
				})
			}
		}



		renderLabel (string:string, h:CreateElement):VNode {
			let name:string = "";
			switch (string) {
				case "info":
					name = "信息";
					break;
				case "repair":
					name = "工单";
					break;
				case "source":
					name = "朔源";
					break;
				case "monitor":
					name = "监测";
					break;
				case "file":
					name = "文档";
					break;
				case "device":
					name = "设备"
					break;
				case "video":
					name = "视频"
					break;
				default:
					name = "";
			}
			return h("div", {}, [
				// @ts-ignore
				h("img", { attrs: { src: imgMap[ string ] }, staticStyle: { display: "block", margin: "0 8px" } }),
				h("span", { staticStyle: { display: "block", width: "36px", textAlign: "center" } }, name)
			]);
		}

		mounted () {
			window.Startend = () =>{
				// @ts-ignore
				document.getElementById("frame").contentWindow.gameInstance.SendMessage("Canvas",'SendUrl',	window.location.hash);
			}
			this.time = moment(new Date()).format("YYYY年MMMDD日 dddd HH:mm:ss");
			this.renderCss();
			setInterval(() => {
				this.time = moment(new Date()).format("YYYY年MMMDD日 dddd HH:mm:ss");
			}, 1000);
			this.getMessage();
			// mock
			this.topLevel = [
				{
					"name": "运维总览",
					children: [
						{
							icon: "&#xe749;",
							name: "运维总览",
							href: "/home/"
						}
					]
				},
				{
					"name": "空间管理",
					icon: "&#xe610;",
					children: [
						/* {
							icon: "&#xe609;",
							name: "3D台帐",
							href: ""
						}, */
						{
							icon: "&#xe648;",
							name: "空间总览",
							href: "/space/main/"
						}
						/* {
							icon: "&#xe601;",
							name: "室内空气",
							href: "/space/air/"
						},
						{
							icon: "&#xe95e;",
							name: "机房环控",
							href: "/space/system/"
						},
						{
							icon: "&#xe751;",
							name: "防火分区",
							href: "/space/fireWall/"
						},
						{
							icon: "&#xe64c;",
							name: "建筑载荷",
							href: "/space/load/"
						} */
					]
				},
				{
					name: "设备管理",
					icon: "&#xe651;",
					children: [
						{
							name: "设备总览",
							href: "/device/main/",
							icon: "&#xe73f;"
						},
						{
							icon: "&#xe6f8;",
							name: "电梯",
							href: "/device/elevator/"
						}
					]
				},
				{
					"name": "维修维保",
					icon: "&#xe63a;",
					children: [
						{
							name: "维修列表",
							href: "/repair/repair/",
							icon: "&#xe669;"
						},
						{
							name: "维保管理",
							href: "/repair/maintenance/",
							icon: "&#xe669;"
						},
						{
							name: "维保计划",
							href: "/repair/maintenancePlan/",
							icon: "&#xe669;"
						}
					]
				},
				{
					"name": "安防管理",
					icon: "&#xe6e3;",
					children: [
						{
							name: "视频监控",
							icon: "&#xe60c;",
							href: "/smt/main/"
						}
					]
				},
				{
					"name": "医疗管理",
					icon: "&#xe60f;",
					children: [
						{
							icon: "&#xe605;",
							name: "门诊统计",
							href: "/medicalData/outpatient/"
						},
						{
							icon: "&#xe621;",
							name: "住院统计",
							href: "/medicalData/hospital/"
						},
						{
							icon: "&#xe74b;",
							name: "医疗设备",
							href: "/medicalData/device/"
						},
						{
							icon: "&#xe666;",
							name: "疫情概况",
							href: "/medicalData/epidemic/"
						}
					]
				},
				{
					"name": "能耗管理",
					icon: "&#xe6e5;",
					children: [
						{
							icon: "&#xe649;",
							name: "能耗分析",
							href: "/energy/main/"
						}
					]
				}
			];
			/* this.topLevel.forEach(t => {
				if (t.children) {
					this.secondLevel = this.secondLevel.concat(t.children);
				}
			}); */

			setTimeout(() => {
				const path:string = this.$route.fullPath;
				console.log(this.$route.fullPath);
				if (path === "/") {
					this.handleMenuClick(this.topLevel[ 0 ], 0);
				} else {
					let flag:boolean = false;
					this.topLevel.forEach((t, index:number) => {
						t.children!.forEach((j) => {
							if (!flag && path === j.href) {
								flag = true;
								this.handleMenuClick(t, index);
								this.$nextTick(() => {
									this.handleSecondClick(j);
								});
							}
						});
					});
					if (!flag) {
						this.handleMenuClick(this.topLevel[ 3 ], 3);
						// @ts-ignore
						this.handleSecondClick(this.topLevel[ 3 ].children[ 1 ]);
					}
				}
			}, 1000);
			if (this.noModule) {
				this.visibility = 0;
				setTimeout(() => {
					window.end({ SendMessage: console.log });
				});
			}
			this.firstLoad = new Promise(resolve => {
				window.end = () => {
					this.visibility = 0;
					console.log(this.$route.fullPath)
					resolve();
					if(this.$route.fullPath == '/mediicalData/epidemic/'){
						// @ts-ignore
					  	document.getElementById("frame").contentWindow.gameInstance.SendMessage("Canvas", 'DoorControlPoint','true');
						}
				};
			});
			if(this.$route.fullPath.indexOf('device') !== -1){
				this.isRoominfo = false;
			}else{
				this.isRoominfo = true;
			}

			this.$store.subscribe(mutation => {
				const type = mutation.type;
				console.log("new event", mutation);
				if (type === "changeModule") {
					console.info("rest workLine");
					this.restModule(mutation.payload.url);
					return;
				} else if (type === "changeBaseColor") {
					this.renderCss();
					return;
				}
				// @ts-ignore
				this.firstLoad.then(() => {
					console.log("event start", mutation);
					// @ts-ignore
					const SendMessage = document.getElementById("frame").contentWindow.gameInstance.SendMessage;
					if (mutation.type === "changeBoolean") {
						SendMessage("Canvas", mutation.payload.name, mutation.payload.value.toString());
					} else if (this.$store.state.showType === "room") {
						if (type === "changeViewByCode") {
							if (mutation.payload.stop) return;
							const id = mutation.payload.id;
							const showCamera = this.$store.state.showCamera;
							if (id === "") {
								SendMessage("Canvas", "ChangeFloor", 117 + "/" + showCamera + "/false/" + (!this.$store.state.showWalls).toString() + "/false");
							} else {
								SendMessage("Canvas", "ChangeFloor", id + "/" + showCamera + "/false/" + (!this.$store.state.showWalls).toString() + "/false");
							}
						} else if (type === "changeColorType") {
							SendMessage("Canvas", "ChangeRoomType", mutation.payload);
						} else if (type === "findFloorAndCamera") {
							SendMessage("Canvas", "ChangeFloor", `${ mutation.payload[ 0 ] }/true/false/false/false/camera:${ mutation.payload[ 1 ] }`);
						} else if (type === "changeWall") {
							SendMessage("Canvas", "HideWalls", (!mutation.payload).toString());
						} else if (type === "updateCameraStatus") {
							if (this.$store.state.floor !== "" && mutation.payload) {
								SendMessage("Canvas", "ChangeFloor", this.$store.state.floorValue + "/true/false/false/false");
							} else if (!mutation.payload) {
								SendMessage("Canvas", "ShowCommonCamera", "false");
							}
						} else if (type === "selectDevice") {
							SendMessage("Canvas", "CameraMove", mutation.payload);
						} else if (type === "findRoom") {
							SendMessage("Canvas", "ChangeFloor", mutation.payload.floor + "/false/false/false/false/block:" + mutation.payload.id);
						} else if (typeof mutation.payload === "boolean") { // ShowEviromentofThewall OpenSpacepointinf
							SendMessage("Canvas", type, mutation.payload.toString());
						}
					} else {
						if (type === "selectDevice") {
							SendMessage("Canvas", "CameraMove", mutation.payload);
						} else if (type === "changeSystem") {
							SendMessage("Canvas", "SwitchSpeci", mutation.payload);
						} else if (type === "changeFlow") {
							SendMessage("Canvas", "Flow", mutation.payload.toString());
						} else if (type === "changeViewByCode") {
							this.$store.commit("changeModule", {
								type: "device",
								url: mutation.payload.id - 90,
								floor: mutation.payload.id
							});
						}
					}
				});
			});
			window.getMessage = (id:string) => {
				const event:{ name:string, value:string } = JSON.parse(id);
				if (event.name === "camera") {
					this.$store.commit("updateLiveStream", event.value);
				} else if (event.name === "Repair") {
					this.$router.push(`/repair/detail/${ event.value }/`);
				}
			};

			window.selected = (id:string) => {
				if(!id){
					return;
				}
				if (this.$store.state.showType === "room") {
					//房间预览
					this.cancelToken && this.cancelToken();
					request({
						url: "/model/rest/pb/guid2obj/",
						params: {
							guid: id
						},
						cancelToken: new CancelToken(cancel => {
							this.cancelToken = cancel;
						})
					}).then(({ data }) => {
						this.attachInfo = [
							// @ts-ignore
							{ name: "房间名", value: data.rooms[ 0 ].Name,img: imgMap['roomName'] },
							// @ts-ignore
							{ name: "房间号", value: data.rooms[ 0 ].number,img: imgMap['roombianhao'] },
							// @ts-ignore
							{ name: "使用部门", value: data.rooms[ 0 ].department__name,img: imgMap['sybm'] },
							// @ts-ignore
							{ name: "房间类型", value: data.rooms[ 0 ].category__name,img: imgMap['roomtype'] },
							// @ts-ignore
							{ name: "使用面积", value: data.rooms[ 0 ].GrossArea ? data.rooms[ 0 ].GrossArea + ' m²' : '',img: imgMap['symj'] },
							// @ts-ignore
							{ name: "建筑面积", value: data.rooms[ 0 ].NetArea ? data.rooms[ 0 ].NetArea + ' m²':'',img: imgMap['roombianhao'] },
						];
						this.showAttach = true;
						request({
							url:`/repair/rest/projectevent/?room=${data.rooms[ 0 ].id}&eventtype=2&pagesize=100`,
						}).then(res=>{
							this.roomMessage.repairlist = res.data.results;
						})
						request({
							url:`/device/device2/?room=${data.rooms[ 0 ].id}&pagesize=100`,
						}).then(res=>{
							this.roomMessage.devicelist = res.data.results;
						})
						request({
							url:`/file/rest/doc2relate/?retry=5&retryDelay=500&relatetype=Room&relateid=${data.rooms[0].id}&format=json`,
						}).then(res=>{
							this.roomMessage.filelist =res.data
						})
					});
				} else if (this.$store.state.showType === "device") {
					this.cancelToken && this.cancelToken();
					this.showDevice = false;
					request({
						url: "/device/device/",
						params: {
							model__guid: id
						},
						cancelToken: new CancelToken(cancel => {
							this.cancelToken = cancel;
						})
					}).then(({ data }) => {
						if (data.count === 1) {
							const device = data.results[ 0 ];
							const baseInfo:Array<deviceInfoTable> = [
								{
									name: "名称",
									icon: "&#xe886;",
									value: device.device_category_name + device.serialnumber
								},
								{
									name: "编号",
									icon: "&#xe731;",
									value: device.code
								},
								{
									name: "位置",
									icon: "&#xe622;",
									value: device.spacestr
								},
								{
									name: "设备状态",
									icon: "&#xe66f;",
									value: ((status:string):string => {
										if (status === "000") {
											return "正常";
										} else {
											let stringArray:string[] = [];
											if (status.charAt(0) === "1") {
												stringArray.push("维修中");
											}
											if (status.charAt(1) === "1") {
												stringArray.push("维保中");
											}
											if (status.charAt(2) === "1") {
												stringArray.push("有警报");
											}
											return stringArray.join();
										}
									})(device.status) || "未知"
								},
								{
									name: "盘点状态",
									icon: "&#xe62d;",
									value: [ "未知", "已盘点", "待盘点", "其他" ][ device.pandianstatus ]
								},
								{
									name: "设备类型",
									icon: "&#xe676;",
									value: device.mepsystemname.join()
								}
							];
							const deviceId = device.id;
							const workLine:AxiosPromise[] = [
								request({
									url: "/device/sensor/",
									params: {
										device: deviceId,
										ordering: "-sensortype__warrantydescription"
									}
								}),
								request({
									url: "/file/rest/doc2relate/",
									params: {
										relatetype: "device",
										relateid: deviceId
									}
								}),
								request({
									url: "/device/deviceconnection/",
									params: {
										device1_id: deviceId
									}
								}),
								request({
									url: "/device/deviceconnection/",
									params: {
										device2_id: deviceId
									}
								}),
								request({
									url: "/repair/rest/projectevent/",
									params: {
										ProjecteventElement__relatedid: deviceId,
										// ProjecteventElement__relatetype: "%E8%AE%BE%E5%A4%87"
									}
								})
							];
							Promise.all(workLine).then(([ sensor, doc, downstream, upstream, repair ]) => {
								const sensorData:Array<deviceInfoTable> = [];
								sensor.data.results.forEach((t:any) => {
									let temp = {
										name: t.name,
										value: t.lastdata,
										range: 0,
										status: "status" + "-" + t.laststation,
										offset: 0,
										class: ""
									};
									if (t.range11 && !isNaN(Number(t.range11))) {
										if (t.laststation === 4) {
											temp.value = "离线";
										} else {
											let range = [ 0, 100 ];
											if (t.normalrange) {
												let baseRange:string[] | number[] = (t.normalrange as string)
													.replace(/ /g, "")
													.replace(new RegExp(t.unit, "g"), "")
													.split("-");
												if (baseRange.length === 1) {
													if (/>/.test(baseRange[ 0 ])) {
														const number:string = baseRange[ 0 ].replace(/>/, "");
														baseRange = [ Number(number), Number(number) * 1.5 ];
													} else if (/</.test(baseRange[ 0 ])) {
														const number:string = baseRange[ 0 ].replace(/</, "");
														baseRange = [ 0, Number(number) ];
													}
												}
												const span:number = Math.abs(Number(baseRange[ 0 ]) - Number(baseRange[ 1 ]));
												range = [ Number(baseRange[ 0 ]) - 0.3 * span, Number(baseRange[ 1 ]) + 0.3 * span ];
											} else {
												range[ 1 ] = (t.range11 || 0) + Math.abs(t.range11 || 0 - t.range12 || 0) * 0.3;
											}
											if (t.range11 && t.range12) {
												temp.class = t.range11 > t.range12 ? "inside" : "outside";
											} else if (t.range11) {
												temp.class = "linear";
											} else {
												temp.class = "revLinear";
											}
											console.log(range);
											temp.offset = Math.abs((t.lastdata - range[ 0 ]) / (range[ 0 ] - range[ 1 ])) * 100;
											if (temp.offset > 100) {
												temp.offset = 100;
											}
											temp.range = Number(t.range11);
										}
									}
									sensorData.push(temp);
								});
								const docs = doc.data.map((t:any) => ({
									name: t.document.name,
									fileType: t.document.filetype,
									url: t.document.fileurl
								}));
								this.showDevice = true;
								this.deviceInfo = {
									base: baseInfo,
									sensor: sensorData,
									file: docs,
									moduleSrc: "",
									downstream: downstream.data.results.map((t:any) => ({name:t.device2.device_category_name + t.device2.code,guid:t.device2.dbid.modelguid})),
									// @ts-ignore
									upstream: upstream.data.results.map((t:any) => ({name:t.device1.device_category_name + t.device1.code,guid:t.device1.dbid.modelguid})),
									repair: repair.data.results
								};
							});
						} else {
							this.$Message.info("当前设备尚未录入");
						}
					});
				} else if (this.$route.name === "requestAdd") {
					request({
						url: "/space/room/",
						params: {
							room_guid: id
						}
					}).then(({ data }) => {
						const temp = data.results[ 0 ];
						this.$store.commit("findRoom", {
							floor: temp.floorid,
							id,
							path: [ temp.floorfacilityid, temp.floorid, temp.id ]
						});
					});
				} else if (this.$route.name === "elevator") {
					request({
						url: "/smt/rest/camera/",
						params: {
							model__guid: id
						}
					}).then(({ data }) => {
						const value = data.results[ 0 ];
						if (value) {
							this.$store.commit("updateLiveStream", [ value.id, value.cameraUuid ].join());
						} else {
							this.$store.commit("updateLiveStream", "");
						}
					});
				}
			};

		}
		@Watch('myroom')
		ChangeModel(newvalue:string){
			if(!newvalue){
				this.searchroom = [];
				return ;
			}
			this.showloading = true;
			this.cancelToken && this.cancelToken();
			request({
				url: "/space/room/",
				params:{
					pagesize:100,
					ordering:'floor_id',
					search:newvalue
				},
				cancelToken: new CancelToken(cancel => {
					this.cancelToken = cancel;
				})}).then(res=>{
				this.searchroom = res.data.results;
				this.showloading = false;
			}).catch(error=>{
				console.log(error)
			})
		}

		@Watch('mydevice')
		ChangeDeviceData(newvalue:string){
			if(!newvalue){
				this.searchdevice = [];
				return;
			}
			this.showloading = true;
			this.cancelToken && this.cancelToken();
			request({
				url: "/device/device2/",
				params:{
					pagesize:100,
					search:newvalue
				},
				cancelToken: new CancelToken(cancel => {
					this.cancelToken = cancel;
				})}).then(res=>{
				this.searchdevice = res.data.results;
				this.showloading = false;
			}).catch(error=>{
				console.log(error)
			})
		}
		@Watch("$route", { immediate: true })
		onRouteChange (newValue:{ name:string } = { name: this.$route.name || "" }, old:{ name:string } = { name: "" }) {
			if(this.$route.fullPath.indexOf('device') !== -1){
				this.isRoominfo = false;
			}else{
				this.isRoominfo = true;
			}
			this.mydevice = "";
			this.myroom = "";
			this.showSearch = -1;
			this.myindex1 = -1;
			this.myindex2 = -1;
			this.showAttach = false;
			this.closexhStatus = false;
			this.showDevice = false;
			const oldName = old.name;
			const newName = newValue.name;
			console.log(oldName, newName);
			if (newName === "deviceMain") {
				this.$store.commit("changeModule", {
					type: "device",
					url: "25",
					floor: 115
				});
			} else if (newName === "elevator") {
				this.$store.commit("changeModule", {
					type: "elevator",
					url: "elevator",
					floor: ""
				});
			} else if (this.$store.state.showType !== "room") {
				this.$store.commit("changeModule", {
					type: "room",
					url: "space",
					floor: ""
				})
			}
			if(this.$route.fullPath == "/medicalData/epidemic/"){
				// @ts-ignore
				 document.getElementById("frame").contentWindow.gameInstance.SendMessage("Canvas", 'DoorControlPoint','true');
			}
			if (newName === "home") {
				this.$store.commit("changeBoolean", { name: "OpenSpacepointinf", value: true });
				this.$store.commit("changeBoolean", { name: "ShowEviromentofThewall", value: true });
			} else {
				this.$store.commit("changeBoolean", { name: "ShowEviromentofThewall", value: false });
				this.$store.commit("changeBoolean", { name: "OpenSpacepointinf", value: false });
			}
			if (newName === "repairTable") {
				this.$store.commit("changeBoolean", { name: "OpenRepair", value: "true" });
				this.$store.commit("changeBoolean", { name: "OpenStation", value: "维保/false" });
				this.$store.commit("changeBoolean", { name: "OpenStation", value: "维修/true" });
			} else if (newName === "maintenanceTable") {
				this.$store.commit("changeBoolean", { name: "OpenRepair", value: "true" });
				this.$store.commit("changeBoolean", { name: "OpenStation", value: "维修/false" });
				this.$store.commit("changeBoolean", { name: "OpenStation", value: "维保/true" });
			} else if (oldName === "maintenanceTable" || oldName === "repairTable") {
				this.$store.commit("changeBoolean", { name: "OpenRepair", value: "false" });
			}
		}

		private subscribe:() => void = () => void 0;
	}
</script>
